<template>
  <div id="materialEdit">
    <view class="nav-box">
      <view class="nav-box-text">
        <image src="@/static/img/home/person.png" class="person"></image>
        <view class="welcome">
          <view
            ><text>姓名：{{ userInfo.nickName }}</text></view
          >
          <view
            ><text>单位：{{ userInfo.dept.deptName }}</text></view
          >
        </view>
      </view>
    </view>
    <view class="project">
      <text>{{ projectInfo.name }}</text>
    </view>
    <view class="uni-list">
      <view
        v-for="(formBlock, index) in formBlocks"
        :key="index"
        class="form-block"
      >
        <uni-forms
          v-if="formBlock"
          :ref="(el) => handleFormRef(el, index)"
          :rules="rules"
          :modelValue="formBlock"
        >
          <!-- 				<uni-forms-item label="批次" name="batch">
					<uni-easyinput v-model="form.batch" :inputBorder="false" placeholder="请输入" :disabled="Type =='2'" />
				</uni-forms-item> -->
          <uni-forms-item label="标段" name="bidSection" required>
            <uni-easyinput
              v-model="formBlock.bidSection"
              :inputBorder="false"
              :maxlength="20"
              placeholder="请输入"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.bidSection
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="材料名称" name="name" required>
            <uni-easyinput
              v-model="formBlock.name"
              :inputBorder="false"
              :maxlength="20"
              placeholder="请输入"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.name
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="材料代码" name="code">
            <uni-easyinput
              v-model="formBlock.code"
              :inputBorder="false"
              :maxlength="100"
              placeholder="请输入"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.code
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="规格型号" name="model">
            <uni-easyinput
              v-model="formBlock.model"
              :inputBorder="false"
              :maxlength="100"
              placeholder="请输入"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.model
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="进场数量" name="number" required>
            <uni-easyinput
              v-model="formBlock.number"
              :inputBorder="false"
              placeholder="请输入"
              type="number"
              :maxlength="10"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.number
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="出厂批号" name="factoryCode" required>
            <uni-easyinput
              v-model="formBlock.factoryCode"
              :inputBorder="false"
              :maxlength="100"
              placeholder="请输入"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.factoryCode
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="品牌" name="brand">
            <uni-easyinput
              v-model="formBlock.brand"
              :inputBorder="false"
              :maxlength="100"
              placeholder="请输入"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.brand
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="供应商" name="supplier">
            <uni-easyinput
              v-model="formBlock.supplier"
              :inputBorder="false"
              :maxlength="100"
              placeholder="请输入"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.supplier
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="重量" name="weight">
            <uni-easyinput
              v-model="formBlock.weight"
              :inputBorder="false"
              :maxlength="100"
              placeholder="请输入"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.weight
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="生产厂家" name="factory" required>
            <uni-easyinput
              v-model="formBlock.factory"
              :inputBorder="false"
              :maxlength="100"
              placeholder="请输入"
              v-if="Type != '2'"
            />
            <view style="display: flex; height: 100%"
              ><text v-if="Type == '2'" style="align-self: center">{{
                formBlock.factory
              }}</text></view
            >
          </uni-forms-item>
          <uni-forms-item label="进场日期" name="approachDate" required>
            <uni-datetime-picker
              v-model="formBlock.approachDate"
              :border="false"
              type="date"
              :disabled="Type == '2'"
            />
          </uni-forms-item>
          <uni-forms-item
            name="files"
            label="图片"
            :id="Type == '2' ? 'hinde' : ''"
            required
          >
            <uni-group>
              <uni-file-picker
                file-mediatype="image"
                :readonly="Type == '2'"
                v-model="formBlock.files"
                limit="9"
                @delete="
                  (e) => {
                    return delets(e, index);
                  }
                "
                @select="
                  (e) => {
                    return detailUpload(e, index);
                  }
                "
              ></uni-file-picker>
            </uni-group>
          </uni-forms-item>
          <uni-forms-item
            name="videoFileIdList"
            label="视频"
            :id="Type == '2' ? 'hinde' : ''"
          >
            <uni-group v-if="Type !== '2'">
              <uni-file-picker
                file-mediatype="video"
                :readonly="Type == '2'"
                v-model="formBlock.videoFiles"
                limit="9"
                @delete="
                  (e) => {
                    return deletsVideo(e, index);
                  }
                "
                @select="
                  (e) => {
                    return detailUploadVideo(e, index);
                  }
                "
              ></uni-file-picker>
            </uni-group>
            <template v-else>
              <view
                v-for="video in formBlock.videoFiles"
                :key="video.id"
                style="margin: 10px 18px"
              >
                <video
                  :src="video.url"
                  style="width: 64px; height: 64px"
                  @play="handlePlay"
                ></video>
              </view>
            </template>
          </uni-forms-item>
          <uni-forms-item>
            <view class="delete-btn" v-if="Type != '2'">
              <button
                type="warn"
                class="add-btn"
                @click="removeFormBlock(formBlock, index)"
              >
                删除
              </button>
              <button
                type="primary"
                class="add-btn"
                @click="copyFormBlock(formBlock, index)"
              >
                复制
              </button>
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
      <uni-forms>
        <uni-list-item name="user" required>
          <template v-slot:header
            ><text class="slot-box">验收人</text></template
          >
          <template v-slot:body><text style="width: 0"></text></template>
          <template v-slot:footer>
            <view
              class="tree-select"
              @click="Type == '2' ? '' : $refs.leadertree._show()"
            >
              {{
                users.length > 0
                  ? users
                      .map((item) => {
                        return item.userName;
                      })
                      .join()
                  : "请选择"
              }}
            </view>
          </template>
        </uni-list-item>
      </uni-forms>
      <view v-if="Type == '2'">
        <view class="title">验收记录</view>
        <uni-table class="tables" stripe emptyText="暂无更多数据">
          <uni-tr>
            <uni-th>序号</uni-th>
            <uni-th>验收人</uni-th>
            <uni-th>验收时间</uni-th>
            <uni-th class="Img">出场图片</uni-th>
            <uni-th class="Img">验收图片</uni-th>
            <uni-th>备注</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, i) in table" :key="item.id">
            <uni-td>{{ i + 1 }}</uni-td>
            <uni-td>{{ item.checkUserName }}</uni-td>
            <uni-td>{{ item.checkTime }}</uni-td>
            <uni-td class="Img">
              <template>
                <view v-for="(res, index) in item.acceptFileList" :key="index">
                  <image
                    class="img1"
                    @tap="preView(res.url)"
                    :src="res.url"
                  ></image>
                </view>
              </template>
            </uni-td>
            <uni-td class="Img">
              <template>
                <view v-for="(res, index) in item.acceptLocalFileList" :key="index">
                  <image
                    class="img1"
                    @tap="preView(res.url)"
                    :src="res.url"
                  ></image>
                </view>
              </template>
            </uni-td>
            <uni-td>{{ item.acceptDescribe }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <view style="height: 60px"></view>
    <view class="bottom-nav" v-if="Type !== '2'">
      <button type="primary" size="mini" class="btn" @click="addFormBlock">
        新增
      </button>
      <button
        type="primary"
        :loading="loading"
        v-if="Type != '2'"
        size="mini"
        class="btn"
        :disabled="!Btn"
        @click="save(0)"
      >
        保存
      </button>
      <button
        type="primary"
        :loading="loading"
        v-if="Type != '2'"
        size="mini"
        class="btn"
        :disabled="!Btn"
        @click="save(1)"
      >
        提交
      </button>

      <button
        type="primary"
        :loading="loading"
        v-if="Type == '2'"
        @click="Return()"
        style="width: 100%"
      >
        返回
      </button>
    </view>
    <tki-tree
      ref="leadertree"
      :range="staff1"
      confirmColor="#4e8af7"
      :multiple="true"
      @confirm="personTreeSelect"
      @cancel="personTreeCancel"
      :selectParent="false"
    />
    <!-- 		<fui-backdrop :show="showFul" closable @click="showFul=false">
			<image :src="preUrl" mode=""></image>
		</fui-backdrop> -->
  </div>
</template>

<script>
// import { addMaterial } from '@/api/material/index.js'
import {
  addMaterial,
  inquirestaff,
  viewDetails,
  updateMaterial,
  initMaterialForm,
  createMaterialDetailByMainId,
  deletePmMaterialDetail,
  copyMaterialDetailByDetailId,
  savePmMaterial,
  submitPmMaterial,
  getMaterialDetailByMainId,
} from "@/api/material/index.js";
import {
  imgUpload,
  fileUpload,
  getPerson,
  addCheck,
  updateCheck,
  findDetail,
  handleCheck,
  findHistory,
} from "../../api/inspection/index.js";
import { decrypt } from "@/common/jsencrpty.js";

export default {
  data() {
    return {
      Btn: true,
      table: [],
      usersIndex: "",
      showFul: false,
      Type: "", //判断编辑详情
      staff: [],
      staff1: [],
      usersIndex: 0,
      files: [],
      userInfo: [],
      projectInfo: [],
      roleStatus: "",
      loading: false,
      pmMaterialMainId: "", //主表单id
      formRefs: [], // 存储所有表单引用
      formBlocks: [
        {
          batch: "",
          brand: "",
          supplier: "",
          name: "",
          bidSection: "",
          code: "",
          model: "",
          number: "",
          factoryCode: "",
          factory: "",
          approachDate: "",
          weight: "",
          fileIdList: [],
          files: [],
          videoFileIdList: [],
          videoFiles: [],
        },
      ],
      users: [],
      // 验证
      rules: {
        name: {
          rules: [{ required: true, errorMessage: "请输入材料名称" }],
        },
        bidSection: {
          rules: [{ required: true, errorMessage: "请输入标段" }],
        },
        number: {
          rules: [
            { required: true, errorMessage: "请输入入场数量" },
            { pattern: "^[1-9]d*|0$", errorMessage: "请输入有效数字" },
          ],
        },
        pproachDate: {
          rules: [{ required: true, errorMessage: "请选择进场日期" }],
        },
        factoryCode: {
          rules: [{ required: true, errorMessage: "请输入出厂批号" }],
        },
        factory: {
          rules: [{ required: true, errorMessage: "请输入生产厂家" }],
        },
        // 'formBlocks.*.users': {
        // 	rules: [{ required: true, errorMessage: '请选择接收人' }]
        // },
        files: {
          rules: [{ required: true, errorMessage: "请选择图片" }],
        },
      },
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.userInfo = uni.getStorageSync("userInfo");
    this.userInfo.nickName = decrypt(this.userInfo.nickName);
    this.projectInfo = uni.getStorageSync("projectInfo");
    this.Type = option.type;
	 this.handlecsh();
    console.log(this.Type);
    if (option.type != "1") {
      this.pmMaterialMainId = option.id;
      this.handlecx();
    } else {
      this.getForm();
    }
  },
  methods: {
    // 获取初始化表单
    async getForm() {
      const res = await initMaterialForm();
      console.log(res.data);
      this.pmMaterialMainId = res.data.id;
      this.formBlocks = res.data.materialDetailList.map((item) => ({
        id: item.id,
        pmMaterialDetailId: item.id,
        pmMaterialMainId: this.pmMaterialMainId,
        batch: item.batch || "",
        brand: item.brand || "",
        supplier: item.supplier || "",
        name: item.name || "",
        bidSection: item.bidSection || "",
        code: item.code || "",
        model: item.model || "",
        number: item.number || "",
        factoryCode: item.factoryCode || "",
        factory: item.factory || "",
        approachDate: item.approachDate || "",
        weight: item.weight || "",
        fileIdList: item.fileIdList || [],
        files: item.files || [],
        videoFileIdList: item.videoFileIdList || [],
        videoFiles: item.videoFiles || [],
      }));
    },
    addFormBlock() {
      createMaterialDetailByMainId({
        pmMaterialMainId: this.pmMaterialMainId,
      }).then((res) => {
        if (res.code == 200) {
          this.formBlocks.push({
            id: res.data.id,
            pmMaterialMainId: this.pmMaterialMainId,
			 pmMaterialDetailId:res.data.id,
            batch: "",
            brand: "",
            supplier: "",
            name: "",
            bidSection: "",
            code: "",
            model: "",
            number: "",
            factoryCode: "",
            factory: "",
            approachDate: "",
            weight: "",
            fileIdList: [],
            videoFileIdList: [],
            files: [],
            videoFiles: [],
          });
        }
      });
    },
    copyFormBlock(formBlock, index) {
      createMaterialDetailByMainId({
        pmMaterialMainId: this.pmMaterialMainId,
      }).then((res) => {
        if (res.code == 200) {
          this.formBlocks.push({
			...formBlock,
			id:res.data.id,
            pmMaterialMainId: this.pmMaterialMainId,
             pmMaterialDetailId: res.id,
          });
        }
      });
    },
    removeFormBlock(formBlock, index) {
      uni.showModal({
        title: "提示",
        content: "确定要删除这个材料信息吗？",
        success: (res) => {
          if (res.confirm) {
            deletePmMaterialDetail({
              pmMaterialDetailId: formBlock.pmMaterialDetailId,
            }).then((res) => {
              if (res.code == 200) {
                this.formBlocks.splice(index, 1);
              }
            });
          }
        },
      });
    },
    // 播放试件音视频
    handlePlay(e) {
      let videoContext = uni.createVideoContext("video", this);
      videoContext.requestFullScreen({ direction: 200 });
    },
    //根据id查询姓名
    findUseranme(id) {
      let userName = "";
	  console.log(id)
	  console.log(this.staff1)
      this.staff1.forEach((item) => {
        if (item.children != null && item.children.length > 0) {
          item.children.forEach((res) => {
            if (id == res.id) {
              userName = res.label;
            }
          });
        }
      });
	  console.log(userName)
      return userName;
    },
    //查找责任人是否选中
    findChecked(id) {
      let isChecked = false;
      this.users.forEach((res) => {
        if (res.userId == id) {
          isChecked = true;
        }
      });
      return isChecked;
    },
    //查找单位下人员
    findChildren(data) {
      return data.map((res) => {
        res.checked = this.findChecked(res.id);
        return res;
      });
    },
    //图片预览
    preView(url) {
      let _this = this;
      let imgsArray = [];
      imgsArray[0] = url;
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      });
    },
    personTreeSelect(e, index) {
      this.users = [];
      if (e && e.length > 0) {
        e.forEach((item) => {
          this.users.push({
            userId: item.id,
            userName: item.label,
          });
        });
      }
    },
    // 责任人取消选择
    personTreeCancel(e) {
      this.users = [];
    },
    delets(e, index) {
      let fileIndex = this.formBlocks[index].fileIdList.indexOf(e.tempFile);
      this.formBlocks[index].fileIdList.splice(fileIndex, 1);
      this.formBlocks[index].files.splice(fileIndex, 1);
    },
    deletsVideo(e, index) {
      let fileIndex = this.formBlocks[index].videoFileIdList.indexOf(
        e.tempFile
      );
      this.formBlocks[index].videoFileIdList.splice(fileIndex, 1);
      this.formBlocks[index].videoFiles.splice(fileIndex, 1);
    },
    handlecx() {
      const data = {
        pmMaterialMainId: this.pmMaterialMainId,
      };
	  console.log(data)
      getMaterialDetailByMainId(this.pmMaterialMainId).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.formBlocks = res.data?.materialDetailList.map((item) => ({
            id: item.id,
            pmMaterialDetailId: item.pmMaterialDetailId,
            pmMaterialMainId: item.pmMaterialMainId,
            batch: item.batch || "",
            brand: item.brand || "",
            supplier: item.supplier || "",
            name: item.name || "",
            bidSection: item.bidSection || "",
            code: item.code || "",
            model: item.model || "",
            number: item.number || "",
            factoryCode: item.factoryCode || "",
            factory: item.factory || "",
            approachDate: item.approachDate || "",
            weight: item.weight || "",
            fileIdList: item.fileIdList || [],
            files: item.files || [],
            videoFileIdList: item.videoFileIdList || [],
            videoFiles: item.videoFiles || [],
          }));

          this.table = res.data?.checkList ?? [];
          if (res.data?.acceptUserId != null) {
            this.users = res.data?.acceptUserIdList?.map((res) => {
              return {
                userId: res,
                userName: this.findUseranme(res),
              };
            });
          }
          this.staff1 = this.staff1.map((item) => {
            item.children = this.findChildren(item.children);
            return item;
          });
        }
      });
    },
    // 文件上传成功触发
    fileUpload(e) {},
    // 处理 ref 回调
    handleFormRef(el, index) {
      if (el) {
        // 处理 uni-app 可能返回数组的情况
        this.formRefs[index] = Array.isArray(el) ? el[0] : el;
      }
    },
    async save(e) {
      await this.$nextTick();
      console.log(this.formRefs);
      const validations = await Promise.all(
        this.formRefs.map((formRef) => formRef.validate())
      );
      if (!validations) {
        uni.showToast({
          title: "请检查表单填写是否正确",
          icon: "none",
        });
        return;
      }

      this.handleyz(e);
    },
    async handleyz(e) {
      this.loading = true;
      console.log;
      this.formBlocks.forEach((item) => {
        delete item.videoFiles; // 删除 videoFiles 字段
        delete item.files; // 删除 Files 字段
      });
      const data = {
        id: this.pmMaterialMainId,
        pmMaterialMainId: this.pmMaterialMainId,
        acceptUserIdList: this.handleUser(this.users),
        materialDetailList: this.formBlocks,
      };
      if (e == "1") {
        // 提交
        submitPmMaterial(data).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: "提交成功",
            });
            uni.navigateTo({
          url: "/pages/material/index",
        });
          } else {
          }
        });
      } else {
        // 保存
        savePmMaterial(data).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: "保存成功",
            });
            this.Return();
          }
        });
      }
    },
    //处理责任人数据
    handleUser(data) {
      return data.map((res) => {
        return res.userId;
      });
    },
    Return() {
      uni.navigateBack();
      // uni.navigateTo({
      // 	url: '/pages/material/index'
      // })
    },
    async handlecsh() {
      var that = this;
      this.projectMe = uni.getStorageSync("projectInfo");
      const row = await inquirestaff(this.projectInfo.id);
      (this.staff = []),
        row.rows.forEach(function (e) {
          that.staff.push(e.nickName);
        });
      this.staff1 = row.rows.map((item) => {
        return {
          id: item.id,
          label: item.deptName,
          children: item.person.map((items) => {
            return {
              id: items.personId,
              label: items.nickName,
            };
          }),
        };
      });
      if (this.Type != "1") {
        // this.handlecx()
      }
    },
    detailUpload(e, index) {
      var that = this;
      that.Btn = false;
      e.tempFilePaths.forEach((res) => {
        imgUpload(res).then((item) => {
          let datas = JSON.parse(item);
          if (datas.code == 200) {
            uni.showToast({
              title: "图片上传成功",
            });
            this.formBlocks[index].files.push({
              id: datas.data.id,
              url: datas.data.url,
            });
            this.formBlocks[index].fileIdList.push(datas.data.id);
            that.Btn = true;
          } else {
            uni.showToast({
              title: datas.msg,
            });
          }
        });
      });
    },
    detailUploadVideo(e, index) {
      var that = this;
      that.Btn = false;
      e.tempFilePaths.forEach((res) => {
        imgUpload(res).then((item) => {
          let datas = JSON.parse(item);
          if (datas.code == 200) {
            uni.showToast({
              title: "图片上传成功",
            });
            this.formBlocks[index].videoFileIdList.push({
              id: datas.data.id,
              url: datas.data.url,
              name: datas.data.realName,
            });
            this.formBlocks[index].videoFiles.push(datas.data.id);
            that.Btn = true;
          } else {
            uni.showToast({
              title: datas.msg,
            });
          }
        });
      });
    },
  },
  mounted() {
   
  },
};
</script>
<style lang="scss" scoped>
.tables {
  .Img {
    width: 12%;
  }
  margin-top: 9.12rpx;
  padding: 0rpx 18.24rpx;
  image {
    width: 80rpx;
    height: 80rpx;
  }
}
.delete-btn {
  display: flex;
}
.form-block {
  position: relative;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;

  .block-title {
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
  }

  .delete-btn {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}

.add-btn {
  margin: 15px;
  padding: 0 10px;
  width: 100%;
}

.is-required {
  color: #f00;
  font-weight: bold;
}
.slot-box {
  color: #333;
  width: 70px;
  font-size: 14px;
}
.tree-select {
  flex: 1;
  color: grey;
  font-size: 14px;
}
#materialEdit {
  min-height: 100vh;
  background-color: #fafafa;

  .nav-box {
    width: 100vw;
    height: 160px;
    margin-top: -44px;
    padding: 56px 20px 56px 20px;
    background-image: url(../../static/img/home/head-bg.png);

    .nav-box-text {
      height: 50px;
      display: flex;
      align-items: center;

      .person {
        width: 48px;
        height: 48px;
      }

      .welcome {
        color: #333;
        font-size: 32rpx;
        margin-left: 40rpx;
      }
    }
  }

  .project {
    padding: 10px;
    border-radius: 8px;
    background-color: #fff;
    margin: -32px 20px 0 20px;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);

    text {
      font-size: 14px;
      font-weight: 700;
    }
  }

  .uni-list {
    background-color: #fff;
    margin: 10px 20px 0 20px;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);

    /deep/ .uni-forms-item__inner {
      padding: 0 10px;
      border-bottom: 1rpx solid #bfbfbf;
    }

    /deep/ .uni-error-message {
      right: 0;
      left: auto;
      margin-right: 5px;
    }

    /deep/ .uni-date__x-input {
      height: 36px;
      line-height: 36px;
    }

    /deep/ .uni-group {
      margin-top: 0 !important;
    }

    .uni-forms-item {
      &:last-child {
        /deep/ .uni-forms-item__inner {
          border-bottom: 0;
        }
      }
    }
  }

  .bottom-nav {
    display: flex;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 50px;
    padding: 10px;
    position: fixed;
    background-color: #fff;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  }

  .runxx {
    display: flex;
    align-items: center;
  }
}
.img1 {
  height: 40rpx;
  width: 40rpx;
  img {
    height: 100%;
    width: 100%;
  }
}
#hinde {
  ::v-deep .is-add {
    display: none !important;
  }
}
</style>
